<template>
  <!--报名抽奖-->
  <div class="apply-box">
    <div class="wrap-box">
      <div class="middle-box">
        <header>
          <hr />
          <p>报名抽奖</p>
          <hr />
        </header>
        <p class="apply-tip">请填写报名信息去抽奖哦~</p>
        <div class="connect-input-box">
          <ul>
            <li v-for="(v,index) of applyListArray" :key="v.id">
              <p>{{v.colNmDesc}}</p>
              <input :type="v.colNm =='mobile'?'number':'text'" name="" id="" value="" v-model="inputValue[index]"
                :placeholder="'请填写'+v.colNmDesc" />
            </li>
          </ul>
        </div>
        <div class="btn" @click="applyLottertBtn">
          提交
        </div>
        <p v-if="isShowYinSi" class="footer-tip" @click="seeYinsi">
          <van-icon name="info-o" color="#fff" style="padding-top: 5px;"/>
          <span>隐私政策</span>
        </p>
      </div>
      <div class="close" @click="closeApplyLottery"></div>
    </div>
  </div>
</template>

<script>
import fun from '../../util/function'
  export default {
    props: {
      activityId: String, //抽奖活动id
      applyLotteryArrayData: Object, //报名抽奖填写的数据
    },
    data() {
      return {
        roomId: this.$route.params.roomid,
        applyListArray: [],
        inputValue: ['', '', '', ''],
        getPlatform:fun.getPlatform(),
        isShowYinSi:true,//是否展示隐私政策
      }
    },
    created() {
      if(this.$channel == 'zxjtqh'){
        if(this.getPlatform!='wx'){
            this.isShowYinSi = false //中信建投期货 只有微信展示
        }
      };
      this.applyListArray = this.applyLotteryArrayData
    },
    methods: {
      seeYinsi(){
        // 打开父组件的隐私政策
        this.$parent.$parent.isPrivacy = true;
      },
      closeApplyLottery() { //关闭报名抽奖
        this.$emit('formChildMsg', {
          type: 'closeApplyLottery',
          data: 'ruan'
        })
      },

      sendPostApplyLottery() {
        let params = {
          'activityId': this.activityId,
          'roomId': this.roomId,
          'mobile': this.inputValue[this.getArrayIndex(this.applyListArray, 'mobile')],
          'defCol1': this.inputValue[this.getArrayIndex(this.applyListArray, 'defCol1')],
          'defCol2': this.inputValue[this.getArrayIndex(this.applyListArray, 'defCol2')],
          'userName': this.inputValue[this.getArrayIndex(this.applyListArray, 'userName')],
        };
        this.$http.post("/lotto/userApply", params, {
          headers: {
            "Content-Type": "application/json"
          }
        }).then(
          res => {
            if (res.data.code == "000000") { //报名成功
              this.$emit('formChildMsg', {
                type: 'applyLotterySuccess',
                data: res.data.data.userDrawTimes //抽奖次数
              })
            } else if (res.data.code == "100004") {
              fun.toastMessage('同一手机号仅限参与一次抽奖');
            } else {
              console.log('报名抽奖返回error', res.data)
            }
          },
          err => {
            console.log(err);
          }
        );
      },
      applyLottertBtn() { //报名抽奖按钮
        for (let i = 0; i < this.applyListArray.length; i++) {
          if (this.inputValue[i].length == '0') {
            fun.toastMessage('请填写' + this.applyListArray[i].colNmDesc);
            return
          }
          if (this.applyListArray[i].colNm == 'mobile') {
            let phoneNum = this.inputValue[i];
            const reg = /^1[3456789]\d{9}$/;
            if (!reg.test(phoneNum)) {
              fun.toastMessage('请填入正确的手机号码')
              return
            }
          }
        }
        this.sendPostApplyLottery()
      },
      getArrayIndex(array, findStr) { //通过findStr(value) 返回当前的下标
        for (let i = 0; i < array.length; i++) {
          if (array[i]['colNm'] == findStr) {
            return i
          }
        }
      },
    }
  }
</script>

<style scoped="scoped">
  .wrap-box {
    width: 100vw;
    height: 900px;
    position: relative;
  }

  input::placeholder {
    color: #E3D4CA;
    font-size: 28px;
  }

  .connect-input-box {
    width: 100%;
    height: 300px;
  }

  .connect-input-box ul {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 34px;
  }

  .connect-input-box ul li {
    width: 100%;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .connect-input-box ul li p {
    width: 120px;
    text-align: right;
    margin-right: 14px;
    font-size: 28px;
    color: white;
  }

  .connect-input-box ul li input {
    width: 325px;
    height: 54px;
    background: #FFF5EE;
    border-radius: 3px 3px 3px 3px;
    padding-left: 14px;
  }

  .btn {
    width: 343px;
    height: 96px;
    background: linear-gradient(0deg, #FFCCAC, #FEE3D2);
    margin: 0 auto;
    border-radius: 48px;
    line-height: 96px;
    text-align: center;
    margin-top: 35px;
    font-size: 38px;
    font-weight: 500;
    color: #965636;
  }

  .apply-box {
    width: 100vw;
    height: 100vh;
    margin: 0 auto;
    position: absolute;
    z-index: 1012;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .middle-box {
    width: 561px;
    height: 682px;
    background: linear-gradient(-45deg, #FF6262 0%, #FF7878 100%);
    border: 2px solid #FED8C0;
    border-radius: 17px;
    margin: 0 auto;
  }

  .close {
    width: 63px;
    height: 63px;
    background: url(../../assets/images/choujiang/cj-close.png) no-repeat;
    background-size: 63px 63px;
    position: absolute;
    bottom: 10px;
    left: 346px;
  }

  header {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }

  header hr {
    width: 60px;
    border: 1px solid transparent;
    border-bottom: 1px solid white;
  }

  header p {
    margin: 0 60px;
    font-size: 38px;
    font-weight: 500;
    color: #FFFFFF;
  }

  .apply-tip {
    width: 100%;
    height: 40px;
    font-size: 24px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 40px;
    text-align: center;
    margin-top: 10px;
  }
  /* 隐私政策 */
  .footer-tip{
    text-align: center;
    font-size: 24px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 33px;
  }
</style>
